<template>
	<view class="uni_box home">
		<navbar title='添加标题'>
		</navbar>
		<view class="content">
			<view class="zitem flex-col">
				<view class="zone alitem" @click="getgong">
					<text class="zhaoname">选择工种</text>
					<view class="ml flex-row">
						<text class="wanshan">修改</text>
						<image class="icon_gd" src="@/pages_admin/static/icon_gd.png" />
					</view>
				</view>
				<view class="zthree" v-if="gzinfo.name">
					<view class="shutext">
						<text class="jianjie">{{gzinfo.name}}</text>
						<text class="jianname">{{gzinfo.descript}}</text>
						<!-- <u-input v-model="name" type="textarea" placeholder='请输入' /> -->
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">招工标题</text>
				</view>
				<view class="zthree">
					<view class="shutext">
						<u-input v-model="from.title" type="textarea" placeholder='输入标题（如 上门维修-空调水电等）' />
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">性别要求</text>
				</view>
				<view class="xingbie">
					<view class="xbitem" :class="from.gender=='0'?'xactive':''" @click="getxing(0)">不限</view>
					<view class="xbitem " :class="from.gender=='1'?'xactive':''" @click="getxing(1)">男</view>
					<view class="xbitem " :class="from.gender=='2'?'xactive':''" @click="getxing(2)">女</view>
				</view>
				<view class="zone alitem">
					<text class="zhaoname">年龄要求</text>
				</view>
				<view class="ztwo">
					<text class="shiname">{{from.age[0]}}～{{ from.age[1] }}</text>
					<view class="shinav">
						<view class="shileft">
							<text class="kname">最小年龄</text>
							<u-input v-model="from.age[0]" :clearable="false" input-align="center" type="number" placeholder='请输入' />
						</view>
						<view class="shilian">
							<view class="lianone">
								<image class="bg" src="@/pages_admin/static/shilianicon.png" />
								<view class="ltxt">
									年龄区间
								</view>
							</view>
						</view>
						<view class="shileft">
							<text class="kname">最大年龄</text>
							<u-input v-model="from.age[1]" :clearable="false" input-align="center" type="number" placeholder='请输入' />
						</view>
					</view>
				</view>
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">详情描述(非必填)</text>
				</view>
				<view class="zthree">
					<view class="shutext">
						<u-input v-model="from.describe" type="textarea" placeholder='补充工资要求或详细内容，请勿填写手机号或微信号' />
					</view>
				</view>
				<view class="chuantu">
					<view class="tuview">
						<view class="tuitem" @click="upload(1)">
							<image class="icon_zp" src="@/pages_admin/static/img_sp.png" mode="" />
							<text>{{ from.video?'已上传':'上传视频' }}</text>
						</view>
						<view class="tuitem" v-if="!from.images" @click="upload(2)">
							<image class="icon_zp" src="@/pages_admin/static/icon_zp.png" mode="" />
							<text>上传照片</text>
						</view>
						<view class="tuitem tuchuan" v-if="from.images" @click="upload(2)">
							<image class="icon_zp" :src="ossThree(from.images)" mode="" />
						</view>
					</view>
					<text class="chuanmiao">上传有工作内容的视频或照片，增加50%的接单率</text>
				</view>
			</view>
			<view class="zitem flex-col" v-if="from.video">
				<view class="zone alitem">
					<text class="zhaoname">上传视频展示</text>
				</view>
				<video class="sp" :src="ossThree(from.video)" mode="" />
			</view>
			<view class="zitem flex-col">
				<view class="zone alitem">
					<text class="zhaoname">工作要求或福利(可多选)</text>
				</view>
				<view class="fuli">
					<view class="fuitem" :class="item.isselect?'fuactive':''" v-for="(item,index) in benelist" :key="index" @click="getfuliclick(item)">{{item.title}}</view>
				</view>
			</view>

			
		</view>
		<view class="botbtn">
			<view class="btnview" @click="getquedin">确定</view>
		</view>

		<!-- 选择工种弹窗 -->
		<JobTypePop :jobtypeshow="jobtypeshow" :gzlist="gzlist" :gzinfo="gzinfo" @closejob="jobtypeshow=false" @quegong="quegong"></JobTypePop>
		<u-picker mode="multiSelector" v-model="gzpshow"  :default-selector='defaultSelector' :range="selectorObj" range-key="name" @columnchange="handleChange" @confirm="confirmgz"></u-picker>
		<!-- <u-picker
		mode="columns"
			v-model="gzpshow"
				:range="columns"
				:default-selector='[0, 0]'
				@confirm="handleConfirm"
				@change="handleChange"
				title="二级联动选择"
			/> -->
	</view>
</template>

<script>
import JobTypePop from '@/pages_admin/components/JobTypePop/JobTypePop'
import {
		baseUrl
	} from '@/utils/config.js'; 
	export default {
		components: {
			JobTypePop,
		},
		data() {
			return {
				min: 0, // 最小值范围
				max: 100, // 最大值范围
				minValue: 0, // 最小值滑块初始值
				// maxValue: 100, // 最大值滑块初始值
				value: 200,
				name:'',
				price:0,
				phone:'',
				minnl:16,
				maxnl:'不限',
				jobtypeshow:false,
				from:{
					occupation:'',//工种
					gender:0,//行别
					age:['16','不限'],//年龄
					title:'',
					describe:'',
					images:'',
					video:'',
					benefit:'',//福利
				},
				gzlist:[],
				gzinfo:{},
				ageinfo:['16','不限'],//年龄
				benelist:[],//福利数据
				ischuan:false,//默认没有值传
				htype:1,
				head_portrait:'',
				gzpshow:false,//工种列表选择
				selectorObj: [
				[
					
				],[
					// {
					// 	name: '1',
					// 	id: 1
					// },
					// {
					// 	cateName: '2',
					// 	id: 2
					// }
				]
				],
				pid:0,
				defaultSelector:[0,0],
				list:[]
			}
		},
		onLoad(option) {
			if(option.from){
				this.ischuan = true
				this.from = JSON.parse(option.from)
				console.log(this.from)
			}
			// this.getgzlist(0);//获取工种
			this.getfuli();//获取福利
		},
		onShow() {
		},
		methods: {
			async getgzlist(index){
				let res = await this.$u.api.getOccupationList({
					page:1,
					limit:1000,
					// pid:0
				});
				let list = res.list
				this.list = res.list
				let selectorObj = this.selectorObj
				selectorObj[0] = list
				selectorObj[1] = list[index].childs
				// this.pid = list[0].id
				this.selectorObj = selectorObj
				// this.getgzlisttwo()
				// let data = res.list
				// for(let i in data){
				// 	data[i].isselect = false
				// }
				// this.gzlist = data
				// if(!this.from.occupation){
				// 	// this.jobtypeshow = true
				// 	// this.gzpshow = true
				// }
				if(this.from.occupation){
					for(let i in data){
						if(data[i].id == this.from.occupation){
							this.gzinfo = data[i]
						}
					}
				}
			},
			async getgzlisttwo(){
				let res = await this.$u.api.getOccupationList({
					page:1,
					limit:1000,
					pid:this.pid
				});
				let list = res.list
				let selectorObj = this.selectorObj
				selectorObj[1] = list
				this.selectorObj = selectorObj
				console.log(this.selectorObj[1])
				this.$forceUpdate()
			},	
			async getfuli(){
				let res = await this.$u.api.getFuli({
					page:1,
					limit:1000
				});
				let datas = res.data
				let shuzu = []
				for(let i in datas){
					let a = {}
					a.isselect = false
					a.title = datas[i]
					shuzu.push(a)
				}
				let data = shuzu
				
				if(this.ischuan){//回显福利标签
					let newbenefit = this.from.benefit.split(',')
					for(let i in data){
						for(let j in newbenefit){
							if(newbenefit[j] == data[i].title){
								data[i].isselect = true
							}
						}
						
					}
				}
				console.log(data)
				this.benelist = data
			},
			endslider(e) {
				// console.log(this.value)
			},
			getgong(){
				this.gzpshow = true
				this.defaultSelector = [0,0]
				this.getgzlist(0);//获取工种
				// this.jobtypeshow = true
			},
			quegong(e){
				if(e){
					this.from.occupation = e.id
					this.gzinfo = e
					this.from.title = e.name
				}
				this.jobtypeshow=false
			},
			getxing(e){
				// console.log(e)
				this.from.gender = e
				console.log(this.from.gender)
				this.$forceUpdate()
			},
			getfuliclick(item){
				let benelist = this.benelist
				for(let i in benelist){
					if(item==benelist[i]){
						benelist[i].isselect = !benelist[i].isselect
					}
					
				}
				this.benelist = benelist
				this.$forceUpdate()
			},
			getquedin(){
				let from = this.from
				let benelist = this.benelist
				let binfo =  []
				for(let i in benelist){
					if(benelist[i].isselect){
						binfo.push(benelist[i].title)
					}
				}
				from.benefit = binfo.toString();//福利选项
				// from.age = this.ageinfo.toString();//年龄选项
				if(!this.from.occupation){
					this.$u.toast("请选择工种");
					return;
				}
				//点击确定 携带参数返回
				uni.$emit('isRefresh',from)
				uni.navigateBack({
					delta: 1
				})
			},
			upload(e) {
				this.htype = e
				
				if(this.htype == 2){
					//照片
					uni.chooseImage({
						count: 1,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							this.head_portrait = tempFilePaths[0];
							// this.isClick = true;
							this.unloadtou()
							uni.showLoading({
								title: '正在上传',
								icon: 'none',//图标
								mask: true
							});
						}
					});
				}else if(this.htype == 1){
					//视频
					uni.chooseVideo({
						sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
						success: (res) => {
							console.log(res)
							const tempFilePaths = res.tempFilePath;
							this.head_portrait = tempFilePaths;
							// this.isClick = true;
							this.unloadtou()
							uni.showLoading({
								title: '正在上传',
								icon: 'none',//图标
								mask: true
							});
						// this.uploadVideo(res.tempFilePath); // 上传选中的视频文件
						}
					});
				}
				
			},
			unloadtou() {
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.head_portrait,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token': uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						// console.log(uploadFileRes)
						uni.hideLoading();
						console.log(JSON.parse(uploadFileRes.data).data.url);//url
						if(that.htype == 2){
							that.from.images = (JSON.parse(uploadFileRes.data).data.url)
						}else if(that.htype == 1){
							that.from.video = (JSON.parse(uploadFileRes.data).data.url)
							console.log(that.from.video)
						}
						
					},fail: e => {
						uni.hideLoading();
					},
				});
			},
			handleChange(e) {
				console.log(e)
				// if (column === 0) {
				// 	console.log(this.selectorObj[0].values[index])
				// 	// 当一级数据发生变化时，更新二级数据
				// 	const selectedFirstLevel = this.selectorObj[0].values[index];
				// 	// this.columns[1].values = this.secondLevelData[selectedFirstLevel];
				// 	// this.columns[1].defaultIndex = 0;
				// }
				let defaultSelector = this.defaultSelector
				let selectorObj = this.selectorObj
				if(e.column == 0){
					defaultSelector[0] = e.column
					let list = this.list
					selectorObj[1] = list[e.index].childs
				}else if(e.column == 1){
					defaultSelector[1] = e.index
				}
				this.selectorObj = selectorObj
				this.defaultSelector = defaultSelector
				this.$forceUpdate()
			},
			confirmgz(e) {
				console.log(e)
				let list = this.list
				this.gzinfo.name = list[e[0]].name
				this.gzinfo.descript = list[e[0]].childs[e[1]].name
				this.from.title = this.gzinfo.name+'-'+this.gzinfo.descript
				this.from.occupation = list[e[0]].childs[e[1]].id
				console.log(this.from.occupation)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.content{
		background-color: #f5f5f5;
		padding: 30rpx 30rpx 130rpx;
		.zitem{
			padding: 30rpx;
			min-height: 110rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 24rpx;
			.zhaoname{
				font-weight: 800;
				font-size: 32rpx;
				color: #111111;
			}
		}
		.wanshan{
			font-weight: 500;
			font-size: 24rpx;
			color: #FF5F40;
			margin-right: 13rpx;
		}
		.wu{
			color: #999999;
		}
		.zone{
			display: flex;
			flex-direction: row;
		}
		.flex-col{
			flex-direction: column;
		}
		.icon_gd{
			width: 20rpx;
			height: 20rpx;
		}

		.flex-row{
			flex-direction: row;
			display: flex;
			align-items: center;
		}
		.alitem{
			align-items: center;
		}
		.ztwo{
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			.shiname{
				font-weight: 400;
				font-size: 30rpx;
				color: #111111;
				display: block;
				margin-bottom: 14rpx;
			}
		}
		.shutext{
			background: #F5F5F5;
			border-radius: 20rpx;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			.jianjie{
				color: #666;
				font-size: 28rpx;
				font-weight: 400;
			}
			.jianname{
				display: block;
				color: #333;
				font-weight: 500;
				font-size: 30rpx;
				margin-top: 5rpx;
			}
		}
		.xingbie{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 30rpx 0;
			.xbitem{
				width: 30%;
				height: 68rpx;
				background: #EEEEEE;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 28rpx;
				color: #666666;
			}
			.xactive{
				background: linear-gradient(90deg, #FF8F39, #FF4D43);
				color: #fff;
			}
		}
		.zthree{
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			.sheng{
				font-weight: bold;
				font-size: 30rpx;
				color: #111111;
			}
			.icon_dz{
				width: 32rpx;
				margin-right: 8rpx;
				height: 32rpx;
			}
			.shi{
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				display: block;
				margin-top: 8rpx;
			}
		}
		.fadan{
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			display: block;
			margin-top: 12rpx;
			margin-bottom: 30rpx;
		}
		.shinav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.shileft{
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				// width: 42%;
				flex: 1;
				// height: 130rpx;
				padding: 15rpx;
				.kname{
					color: #333;
					font-size: 25rpx;
					font-weight: 400;
				}
				.ktime{
					font-weight: 500;
					font-size: 38rpx;
					color: #111111;
				}
				/deep/.uni-input-input{
					min-height: 20px;
					font-size: 36rpx;
					font-weight: 500;
					color: #111;
				}
			}
			.shilian{
				display: flex;
				flex-direction: column;
				width: 180rpx;
				margin: 0 15rpx;
				justify-content: center;
				align-items: center;
				.lianone{
					position: relative;
					width: 100%;
					height: 37rpx;
					.ltxt{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF653F;
					}
				}
				.gong{
					font-weight: bold;
					font-size: 32rpx;
					color: #111111;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
	}
	.wrap {
		padding: 30rpx;
	}
	.chuantu{
		margin-top: 20rpx;
	}
	.chuanmiao{
		display: block;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.tuview{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.tuitem{
			margin: 0 30rpx 0 0;
			width: 160rpx;
			height: 160rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			.icon_zp{
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 20rpx;
			}
			text{
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.tuchuan{
			.icon_zp{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				margin-bottom: 0;
			}
		}
	}
	.gaoshe{
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		padding:20rpx 30rpx 10rpx;
		margin-bottom: 24rpx;
		.gaoitem{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
			display: flex;
			flex-direction: row;
			align-items: center;
			.gaoleft{
				display: flex;
				flex-direction: column;
				.jiename{
					font-weight: 800;
					font-size: 28rpx;
					color: #111111;
				}
				.miao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin-top: 10rpx;
				}
			}
			.gaoright{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;
				.wei{
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}
				.icon_gd{
					margin-left: 15rpx;
					width: 18rpx;
					height: 18rpx;
				}
				.kaiicon{
					display: none;
				}
			}
			.kai{
				.wei{
					font-weight: 500;
					font-size: 24rpx;
					color: #FF5F40;
				}
				.kaiicon{
					margin-right: 10rpx;
					width: 10rpx;
					height: 10rpx;
					background: #44BC6B;
					border-radius: 50%;
					display: inline-block;
				}
			}
		}
		.gaoitem:last-child{
			border-bottom: none;
		}
	}
	.xieyi{
		margin: 40rpx 0;
		display: flex;
		flex-direction: column;
		.xieiem{
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			display: block;
			margin-bottom: 8rpx;
			.xys{
				color: rgba(34, 160, 232, 1);
				display: inline-block;
				margin: 0 5rpx;
			}
		}
	}
	.henxu{
		display: flex;
		flex-direction: row;
		align-items: center;
		.hengleft{
			width: 100rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_jh{
				width: 36rpx;
				height: 36rpx;

			}
		}
		.hengnav{
			display: flex;
			flex: 1;
			margin: 0 20rpx;
			height: 100rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 0 20rpx;
			align-items: center;
			position: relative;
			/deep/.uni-input-input{
				color: #111;
				font-size: 48rpx;
				font-weight: 500;
			}
			.danwei{
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
				// position: absolute;
				right: 12rpx;

			}
		}
		
	}
	.jishi{
		display: flex;
		margin-left: auto;
		.jiitem{
			margin-left: 40rpx;
			position: relative;
			padding-bottom: 10rpx;
			.jsname{
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
			}
			.hengbot{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 6rpx;
				background: #FF5F40;
				display:none;
				left: 0;
				
			}
		}
		.jactive{
			.jsname{
				color: #111111;

			}
			.hengbot{
				display: inline-block;
				
			}
		}
	}
	
	.fuli{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.fuitem{
			padding: 5rpx 20rpx;
			background: #F5F5F5;
			border-radius: 6rpx;
			margin: 0 20rpx 20rpx 0;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
		.fuactive{
			color: #fff;
			background: #FF5F40;
		}
	}
	.badge-button {
		padding: 4rpx 6rpx;
		background-color: #ff6d00;
		color: #fff;
		border-radius: 10rpx;
		font-size: 22rpx;
		line-height: 1;
		position: relative;
		z-index: 4;
	}
	.icon_an{
		width: 48rpx;
		height: 62rpx;
	}
	.botbtn{
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 120rpx;
		padding: 10rpx 30rpx auto;
		background-color: #fff;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.btnview{
			width: 94%;
			height: 90rpx;
			background: linear-gradient(90deg, #FF8F39, #FF4D43);
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}
	.huakuai{
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: auto;
		.huaview{
			display: flex;
			flex-direction: column;
			width: 100%;
			.yanse{
				width: 100%;
				display: flex;
				flex-direction: row;
				height: 20rpx;
				position: relative;
				z-index: 2;
			}
			.huaone{
				width: 30%;
				height: 100%;
				background: linear-gradient(90deg, #FF9292, #F41C1C);
			}
			.huatwo{
				width: 25%;
				height: 100%;
				background: linear-gradient(90deg, #FEE161, #F4CF1C);
			}
			.huathree{
				width: 45%;
				height: 100%;
				background: linear-gradient(90deg, #60F49E, #40E284);
			}
		}
		.yanzi{
			display: flex;
			margin-top: 20rpx;
			flex-direction: row;
			.jone{
				position: relative;
				left: -15rpx;
			}
			.jtwo{
				margin-left: 20%;
			}
			.jthree{
				margin-left: 20%;
			}
			.jfour{
				margin-left: auto;
				position: relative;
				right: -15rpx;
			}
			.jia{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.newhua{
			position: absolute;
			width: 100%;
			top: 8rpx;
		}
		/deep/.u-slider{
			z-index: auto;
		}
		
	}
	.qhua{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		display: block;
		text-align: center;
		margin-bottom: 20rpx;

	}
	.qjia{
		font-weight: 800;
		font-size: 28rpx;
		color: #111111;
		display: block;
		text-align: center;
		margin-bottom: 20rpx;

	}
	.sp{
		width: 100%;
		min-height: 300rpx;
		position: relative;
		margin-top: 30rpx;
	}
	/deep/.huakuai{
		z-index: auto;
	}
	/deep/.u-slider__gap{
		background-color: transparent !important;
		z-index: 10;
	}
</style>
